{% extends "themes/" + sysSettings.systemTheme + "/layout.html" %}

{% block head %}
<title>{{sysSettings.siteName}} - Administration Page</title>

<script type="text/javascript" src="/static/vendor/socketio/js/socket.io.js"></script>
<script type="text/javascript" src="/static/vendor/chartjs/js/Chart.bundle.min.js"></script>
{% endblock %}

{% block body %}
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-lg-10 col-md-12" style="margin-top:15px;">
            <ul class="nav nav-pills mb-3" id="admin-nav" role="tablist">
                <li class="nav-item">
                    <a class="nav-link {% if page == None or page == 'dash' %} active {% endif %}"  role="tab" id="admin-nav-dashboard" href="#dashboard" data-toggle="pill" aria-controls="admin-nav-dashboard" aria-selected="true">Dashboard</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if page == 'settings' %} active {% endif %}" role="tab" id="admin-nav-settings" href="#adminSettings" data-toggle="pill" aria-controls="admin-nav-settings" aria-selected="false">Settings</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if page == 'webhooks' %} active {% endif %}" role="tab" id="admin-nav-webhooks" href="#webhooksSettings" data-toggle="pill" aria-controls="webhooks-nav-settings" aria-selected="false">Webhooks</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if page == 'users' %} active {% endif %}" role="tab" id="admin-nav-users" href="#userList" data-toggle="pill" aria-controls="admin-nav-users" aria-selected="false">Users</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if page == 'topics' %} active {% endif %}" role="tab" id="admin-nav-topics" href="#topicsList" data-toggle="pill" aria-controls="admin-nav-topics" aria-selected="false">Topics</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if page == 'channels' %} active {% endif %}" role="tab" id="admin-nav-channels" href="#channelsList" data-toggle="pill" aria-controls="admin-nav-channels" aria-selected="false">Channels</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if page == 'streams' %} active {% endif %}" role="tab" id="admin-nav-streams" href="#streamsList" data-toggle="pill" aria-controls="admin-nav-streams" aria-selected="false">Streams</a>
                </li>
                {# <li class="nav-item">
                    <a class="nav-link {% if page == 'hub' %} active {% endif %}" role="tab" id="admin-nav-hub" href="#hubSettings" data-toggle="pill" aria-controls="admin-nav-hub" aria-selected="false">Hub</a>
                </li> #}
                <li class="nav-item">
                    <a class="nav-link {% if page == 'logs' %} active {% endif %}" role="tab" id="admin-nav-logs" href="#logs" data-toggle="pill" aria-controls="admin-nav-logs" aria-selected="false">Logs</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if page == 'backup' %} active {% endif %}" role="tab" id="admin-nav-backuprestore" href="#backuprestore" data-toggle="pill" aria-controls="admin-nav-backuprestore" aria-selected="false">Backup/Restore</a>
                </li>
            </ul>

            <div class="tab-content" id="admin-content">
                <div class="tab-pane fade {% if page == None or page == 'dash' %}show active{% endif %}" role="tabpanel" aria-labelledby="admin-content-dashboard" id="dashboard">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-lg-6 col-md-12">
                                <div>
                                    <h2><i class="fas fa-server"></i> Server Info</h2><br>
                                    <b><img src="/static/img/logo.png" width="64px" height="64px"> Open Streaming Platform</b><br>
                                    <div style="margin-left:70px;">
                                        <b><a href="https://gitlab.com/Deamos/flask-nginx-rtmp-manager">https://gitlab.com/Deamos/flask-nginx-rtmp-manager</a></b><br>
                                        <b>Server Version:</b> {{sysSettings.version}} <br>
                                        <b>Git Branch:</b> {{repoBranch}} <br>
                                        <b>Git Commit Hash:</b> {{repoSHA}}  {% if repoSHA != remoteSHA %} <span class="badge badge-success">Update Available!</span> {% else %} <span class="badge badge-secondary">No Update Available</span>{% endif %}<br>
                                        <b>Database Version:</b> {{appDBVer}} <br><br>
                                        <b>NGINX Version:</b> {{nginxStatData['rtmp']['nginx_version']}}<br>
                                        <b>NGINX-RTMP Version</b> {{nginxStatData['rtmp']['nginx_rtmp_version']}}<br>
                                        <b>Uptime:</b> {{nginxStatData['rtmp']['uptime']|hms_format}}
                                    </div>
                                </div><br>
                                <div class="card">
                                    <div class="card-header"><i class="fas fa-video"></i> RTMP Stats</div>
                                    <div class="card-body">
                                        <table class="table table-hover">
                                            <thead>
                                            <tr>
                                                <th scope="col">Endpoint</th>
                                                <th scope="col">Key</th>
                                                <th scope="col">In Kbps</th>
                                                <th scope="col">Out Kbps</th>
                                                <th scope="col">Clients</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            {% for data in nginxStatData['rtmp']['server']['application'] %}
                                                {% if 'stream' in data['live'] %}
                                                    {% if data['live']['stream'] | testList %}
                                                        {% for entry in data['live']['stream'] %}
                                                            <tr>
                                                                <td>{{data['name']}}</td>
                                                                <td>{{entry['name']}}</td>
                                                                <td>{{entry['bw_in']|format_kbps}}</td>
                                                                <td>{{entry['bw_out']|format_kbps}}</td>
                                                                <td>{{entry['nclients']}}</td>
                                                            </tr>
                                                        {% endfor %}
                                                    {% else %}
                                                    <tr>
                                                        <td>{{data['name']}}</td>
                                                        <td>{{data['live']['stream']['name']}}</td>
                                                        <td>{{data['live']['stream']['bw_in']|format_kbps}}</td>
                                                        <td>{{data['live']['stream']['bw_out']|format_kbps}}</td>
                                                        <td>{{data['live']['stream']['nclients']}}</td>
                                                    </tr>
                                                    {% endif %}
                                                {% endif %}
                                            {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-12">
                                <div class="card">
                                    <div class="card-header"><i class="fas fa-chart-bar"></i> Resource Usage</div>
                                    <div class="card-body">
                                        CPU<br>
                                        <div class="progress">
                                          <div id="cpuUsage" class="progress-bar bg-info" role="progressbar" style="width: 0%;color:black;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                                        </div><br>
                                        Memory<br>
                                        <div class="progress">
                                          <div id="memoryUsage" class="progress-bar bg-danger" role="progressbar" style="width: 0%;color:black;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                                        </div><br>
                                        Disk<br>
                                        <div class="progress">
                                          <div id="diskUsage" class="progress-bar" role="progressbar" style="width: 0%;color:black;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                                        </div>
                                    </div>
                                </div>
                                <br>
                                <div class="card">
                                    <div class="card-header"><i class="fas fa-chart-bar"></i> Viewer Stats</div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-xl-6 col-md-12">
                                                <div class="callout callout-success"><h4>Current Stream Viewers</h4><br><h2>{{currentViewers}}</h2></div>
                                            </div>
                                            <div class="col-xl-6 col-md-12">
                                                <div class="callout callout-primary"><h4>Total Viewers (30 days)</h4><br><h2>{{viewersTotal}}</h2></div>
                                            </div>
                                        </div>
                                        <div id="statChart">
                                            <canvas id="viewershipChart" width="400" height="400"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <br>
                    </div>
                </div>
                <div class="tab-pane fade {% if page == 'settings' %}show active{% endif %}" role="tabpanel" aria-labelledby="admin-content-settings" id="adminSettings">
                    <h5>Configuration Options</h5>
                      <form action="/settings/admin" enctype=multipart/form-data method="post">
                          <div class="row">
                              <div class="col-sm-12 col-md-6">
                                  <h4><i class="fas fa-server"></i> Server Settings</h4>
                                  Server Name: <input type="text" name="serverName" class="form-control" value="{{sysSettings.siteName}}"required>
                                  <br>
                                  <div class="form-row">
                                      <div class="form-group mx-2">
                                        Server Protocol:
                                          <select name="siteProtocol" class="form-control">
                                              <option value="http://" {% if sysSettings.siteProtocol == 'http://' %} selected {% endif %}>http://</option>
                                              <option value="https://" {% if sysSettings.siteProtocol == 'https://' %} selected {% endif %}>https://</option>
                                          </select>
                                      </div>
                                      <div class="form-group mx-2">
                                        Server Hostname/IP Address: <input type="text" name="serverAddress" class="form-control" value="{{sysSettings.siteAddress}}" size="48" required autocomplete="new-password">
                                      </div>
                                  </div>
                                  <hr>
                                  System Logo:
                                  <img src="{{sysSettings.systemLogo}}" width="32" height="32"><br>
                                  <input type="file" name="photo" class="form-control-file" value="Upload a Logo" style="margin-top:10px;+"><br>
                                  Theme:
                                  <select class="form-control" name="theme">
                                      {% for theme in themeList %}
                                      <option value="{{theme}}" {% if sysSettings.systemTheme == theme %} selected {% endif %}>{{theme}}</option>
                                      {% endfor %}
                                  </select>
                                  <hr>
                                  Allow Users to Record:<br>
                                  <input type="checkbox" data-toggle="toggle" data-width="50" data-on=" " data-off=" " id="recordSelect" name="recordSelect" autocomplete="new-password" {% if sysSettings.allowRecording == True %} checked {% endif %}>
                                  <br>
                                  Allow Users to Upload Video:<br>
                                  <input type="checkbox" data-toggle="toggle" data-width="50" data-on=" " data-off=" " id="uploadSelect" name="uploadSelect" autocomplete="new-password" {% if sysSettings.allowUploads == True %} checked {% endif %}>
                                  <br>
                                  Enable Adaptive Streaming (Can Cause Significant CPU Usage Per Stream)<br>
                                  <input type="checkbox" data-toggle="toggle" data-width="50" data-on=" " data-off=" " id="adaptiveStreaming" name="adaptiveStreaming" autocomplete="new-password" {% if sysSettings.adaptiveStreaming == True %} checked {% endif %}>
                                  <br>
                                  Display Empty Channels, Streamers, and Topics<br>
                                  <input type="checkbox" data-toggle="toggle" data-width="50" data-on=" " data-off=" " id="showEmptyTables" name="showEmptyTables" autocomplete="new-password" {% if sysSettings.showEmptyTables == True %} checked {% endif %}>
                                  <br>
                                  Globally Allow Comments (Can be Disabled on a Per Video Basis)<br>
                                  <input type="checkbox" data-toggle="toggle" data-width="50" data-on=" " data-off=" " id="allowComments" name="allowComments" autocomplete="new-password" {% if sysSettings.allowComments == True %} checked {% endif %}>
                                  <br>
                                  Enable Channel Protection System (Can cause some slowdown with loading images and video)<br>
                                  <input type="checkbox" data-toggle="toggle" data-width="50" data-on=" " data-off=" " id="enableProtection" name="enableProtection" autocomplete="new-password" {% if sysSettings.protectionEnabled == True %} checked {% endif %}>
                              </div>
                              <div class="col-sm-12 col-md-6">
                                  <h4><i class="fas fa-envelope"></i> Email Settings</h4>
                                  SMTP Email From: <input type="email" name="smtpSendAs" class="form-control" value="{{sysSettings.smtpSendAs}}" required autocomplete="new-password">
                                  SMTP Address: <input type="text" name="smtpAddress" class="form-control" value="{{sysSettings.smtpAddress}}" required autocomplete="new-password">
                                  SMTP Port: <input type="number" name="smtpPort" class="form-control" value={{sysSettings.smtpPort}} required autocomplete="new-password">
                                  SMTP Username:<input type="text" name="smtpUser" class="form-control" value="{{sysSettings.smtpUsername}}" autocomplete="new-password">
                                  SMTP Password<input type="password" name="smtpPassword" class="form-control" value="{{sysSettings.smtpPassword}}" autocomplete="new-password">
                                  SMTP SSL:<br>
                                  <input type="checkbox" data-toggle="toggle" data-width="50" data-on=" " data-off=" " id="smtpSSL" name="smtpSSL" autocomplete="new-password" {% if sysSettings.smtpSSL == True %} checked {% endif %}>
                                  <br>
                                  SMTP TLS:<br>
                                  <input type="checkbox" data-toggle="toggle" data-width="50" data-on=" " data-off=" " id="smtpTLS" name="smtpTLS" autocomplete="new-password" {% if sysSettings.smtpTLS == True %} checked {% endif %}>
                                  <hr>
                                  <h4><i class="fas fa-stream"></i> Other</h4>
                                  <div class="form-group">
                                    <label for="serverMessage" class="col-form-label"><b>Server Message (Displayed on Main Page)</b></label>
                                    <textarea class="form-control" name="serverMessage" id="serverMessage" value="" maxlength="2048">{{sysSettings.serverMessage}}</textarea>
                                  </div>
                              </div>
                              <hr>
                          </div><br>
                          <div class="row">
                              <div class="col-12">
                                  <input type="hidden" value="system" id="settingType" name="settingType">
                                  <div class="form-row text-center">
                                    <button type="submit" class="btn btn-primary btn-block">Submit</button>
                                  </div>
                              </div>
                          </div>
                      </form>
                </div>
                <div class="tab-pane fade {% if page == 'webhooks' %}show active{% endif %}" role="tabpanel" aria-labelledby="admin-content-webhooks" id="webhooksSettings">
                <h5>Global Webhooks</h5>
                     <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h6><b><i class="fas fa-globe"></i> Active Webhooks</b>
                                        <span class="float-right"><button class="btn btn-sm btn-success shadow" type="button" onclick="openNewWebhookModal();"><i class="fas fa-plus"></i></button></span>
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div id="webhookList">
                                        <div class="table-responsive">
                                            <table id="webhookTable" class="table table-borderless" width="100%">
                                                <thead>
                                                    <tr>
                                                        <th>Webhook Name</th>
                                                        <th>Trigger</th>
                                                        <th></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    {% for webhook in globalHooks %}
                                                    <tr id="webhookTableRow-{{webhook.id}}">
                                                        <td id="webhookRowName-{{webhook.id}}">{{webhook.name}}</td>
                                                        <td id="webhookRowEndpoint-{{webhook.id}}" style="display:none;">{{webhook.endpointURL}}</td>
                                                        <td id="webhookRowTrigger-{{webhook.id}}">{{webhook.requestTrigger|get_webhookTrigger}}</td>
                                                        <td id="webhookRowType-{{webhook.id}}" style="display:none;">{{webhook.requestType}}</td>
                                                        <td id="webhookRowHeader-{{webhook.id}}" style="display:none;">{{webhook.requestHeader}}</td>
                                                        <td id="webhookRowPayload-{{webhook.id}}" style="display:none;">{{webhook.requestPayload}}</td>
                                                        <td>
                                                            <button type="button" class="btn btn-sm btn-warning" onclick="editWebhook('{{webhook.id}}')"><i class="fas fa-edit"></i></button>
                                                            <button type="button" class="btn btn-sm btn-danger" onclick="deleteWebhook('{{webhook.id}}')"><i class="far fa-trash-alt"></i></button>
                                                        </td>
                                                    </tr>
                                                    {% endfor %}
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                     </div>
                    <div class="modal fade" id="newWebhookModal" tabindex="-1" role="dialog" aria-labelledby="newWebhookModalTitle" aria-hidden="true">
                      <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h5 class="modal-title" id="newWebhookModalTitle">Create/Edit Webhook</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">&times;</span>
                            </button>
                          </div>
                          <div class="modal-body">
                             <div class="row">
                                 <div class="col-12">
                                     <div class="form-row">
                                        <div class="form-group col-md-4">
                                            <label for="webhookName">Name</label>
                                            <input id="webhookName" class="form-control">
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label for="webhookEndpoint">Endpoint URL</label>
                                            <input id="webhookEndpoint" class="form-control" autocomplete="new-password">
                                        </div>
                                        <div class="col-md-4"></div>
                                        <div class="form-group col-md-12">
                                            <label for="webhookHeader">Request Header</label>
                                            <textarea id="webhookHeader" class="form-control" maxlength="4096" > </textarea>
                                        </div>
                                        <div class="form-group col-md-12">
                                            <label for="webhookPayload">Payload</label>
                                            <textarea id="webhookPayload" class="form-control" cols=50 rows=25 maxlength="4096"></textarea>
                                        </div>
                                        <div class="form-group col-md-2">
                                            <label for="webhookReqType">Type</label>
                                            <select id="webhookReqType" class="form-control">
                                                 <option value=0 selected>POST</option>
                                                 <option value=1>GET</option>
                                                 <option value=2>PUT</option>
                                                 <option value=3>DELETE</option>
                                            </select>
                                        </div>
                                        <div class="form-group col-md-3">
                                            <label for="webhookTrigger">Trigger Event</label>
                                            <select id="webhookTrigger" class="form-control">
                                                 <option value=0 selected>Stream Start</option>
                                                 <option value=1>Stream End</option>
                                                 <option value=2>Stream Viewer Join</option>
                                                 <option value=4>Stream Name Change</option>
                                                 <option value=5>Chat Message</option>
                                                 <option value=6>New Video</option>
                                                 <option value=7>Video Comment</option>
                                                 <option value=9>Video Name Change</option>
                                                 <option value=10>Channel Subscription</option>
                                                 <option value=20>New User</option>
                                            </select>
                                        </div>
                                        <input id="webhookInputAction" type="hidden">
                                        <input id="webhookID" type="hidden">
                                     </div>
                                 </div>
                             </div>
                          </div>
                          <div class="modal-footer">
                              <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
                              <button type="button" class="btn btn-success" data-dismiss="modal" onclick="submitWebhook();">Save</button>
                          </div>
                        </div>
                      </div>
                    </div>
                </div>
                <div class="tab-pane fade {% if page == 'users' %}show active{% endif %}" role="tabpanel" aria-labelledby="admin-content-users" id="userList">
                    <h5>User List <button class="btn btn-primary" data-toggle="modal" data-target="#newUserModal"><i class="fas fa-plus-square"></i> New User</button></h5>
                    <div class="container-fluid justify-content-center" style="width:100%;padding-top:15px;">
                        <div class="input-group">
                            <div class="input-group-prepend shadow">
                                <div class="input-group-text"><i class="fas fa-search"></i></div>
                            </div>
                            <input type="text" id="search" name="search" class="searchBar form-control shadow" placeholder="Search">
                        </div>
                    </div>
                    <br>
                    <div class="container-fluid">

                    {% for user in userList %}
                        <div class="row">
                            <div class="col-12">
                                <div class="card shadow searchable">
                                    <div class="card-header {% if user.active == False %} bg-primary{% endif %} text-white">
                                        <b><a href="/streamers/{{user.id}}/">{{user.username}}</a></b>
                                        <div class="float-right">
                                            <a href="/settings/admin?action=toggleActive&setting=users&userID={{user.id}}" class="btn btn-sm {% if user.active == True %}btn-secondary {% else %} btn-success {% endif %} shadow"><i class="fas {% if user.active == True %}fa-user-slash{% else %}fa-user{% endif %}"></i></a>
                                            <a href="/settings/admin?action=delete&setting=users&userID={{user.id}}" class="btn btn-sm btn-danger shadow"><i class="far fa-trash-alt"></i></a>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                          <div class="col-xl-1 col-sm-12">
                                            <img src="/images/{{user.pictureLocation}}" width="64px" height="64px" onerror="this.src='/static/img/user2.png';">
                                          </div>
                                          <div class="col-xl-2 col-sm-12">
                                            <i class="fas fa-at"></i> {{user.email}}<br>
                                          </div>
                                          <div class="col-xl-3 col-sm-12">
                                            <i class="fas fa-key"></i> Roles: <button type="button" class="btn btn-sm btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Add Role</button>
                                          <div class="dropdown-menu">
                                            <a class="dropdown-item" href="/settings/admin?action=add&setting=userRole&userID={{user.id}}&roleName=Admin">Admin</a>
                                            <a class="dropdown-item" href="/settings/admin?action=add&setting=userRole&userID={{user.id}}&roleName=Streamer">Streamer</a>
                                            <a class="dropdown-item" href="/settings/admin?action=add&setting=userRole&userID={{user.id}}&roleName=User">User</a>
                                            </div><br>
                                            {% for role in user.roles %}
                                            <span class="badge badge-info">{{role.name}} <a href="/settings/admin?action=delete&setting=userRole&userID={{user.id}}&roleID={{role.id}}"><i class="far fa-trash-alt"></i></a></span><br>
                                          {% endfor %}
                                          </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <br>
                    {% endfor %}
                    </div>
                        <div class="modal fade" id="newUserModal" tabindex="-1" role="dialog" aria-labelledby="newUserModalTitle" aria-hidden="true">
                          <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                            <div class="modal-content">
                              <form action="/settings/admin" method="post" onsubmit="return passwordCheck()">
                              <div class="modal-header">
                                <h5 class="modal-title" id="newUserModalTitle">Create New User</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                  <span aria-hidden="true">&times;</span>
                                </button>
                              </div>
                              <div class="modal-body">
                                  <div class="container">
                                    <div class="row">
                                        <div class="col-12">
                                            <label for="username">Username</label>
                                            <input type="text" name="username" id="username" class="form-control" required autocomplete="new-password">
                                        </div>
                                    </div>
                                    <br>
                                    <div class="row">
                                        <div class="col-12">
                                            <label for="emailaddress">Email Address</label>
                                            <input type="text" name="emailaddress" id="emailaddress" class="form-control" required autocomplete="new-password">
                                        </div>
                                    </div>
                                    <br>
                                    <div class="row">
                                        <div class="col-12">
                                            <label for="password1">Password</label>
                                            <input type="password" name="password1" id="password1" class="form-control" required autocomplete="new-password">
                                        </div>
                                        <br>
                                        <div class="col-12">
                                            <label for="password2">Confirm Password</label>
                                            <input type="password" name="password2" id="password2" class="form-control" required autocomplete="new-password">
                                        </div>
                                    </div>
                                    <br>

                                  </div>
                                  <input type="hidden" value="newuser" id="settingType" name="settingType">
                              </div>
                              <div class="modal-footer">
                                <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
                                <input type="submit" class="btn btn-success" value="Create">
                              </div>
                              </form>
                            </div>
                          </div>
                        </div>
                    </div>
                <div class="tab-pane fade {% if page == 'topics' %}show active{% endif %}" role="tabpanel" aria-labelledby="admin-content-topics" id="topicsList">
                    <h5>Topics List <div class="float-right"></div><button class="btn btn-primary" data-toggle="modal" data-target="#newTopicModal"><i class="fas fa-plus-square"></i> New Topic</button></h5></h5>
                    <div class="container-fluid">
                        {% for topic in topicsList %}
                        <div class="row">
                            <div class="col-12">
                                <form action="/settings/admin" enctype=multipart/form-data method="post">
                                <div class="card shadow">
                                  <div class="card-header">
                                    <div class="row">
                                      <div class="col-4">
                                        <input type="text" name="name" id="name" class="form-control" value="{{topic.name}}" required autocomplete="new-password">
                                      </div>
                                      <div class="col-8">
                                          <div class="float-right">
                                            <button type="submit" class="btn btn-success shadow"><i class="fas fa-edit"></i></button>
                                            <a href="/settings/admin?action=delete&setting=topics&topicID={{topic.id}}" class="btn btn-danger shadow"><i class="far fa-trash-alt"></i></a>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  <div class="card-body">
                                    <img width="284px" height="155px" src="/images/{{topic.iconClass}}" onerror="this.src='/static/img/video-placeholder.jpg';">
                                    <br><br>
                                    <div class="custom-file">
                                      <input type="file" class="custom-file-input" name=photo id="photo">
                                      <label class="custom-file-label" for="photo">Upload a Photo</label>
                                    </div>
                                    <input type="hidden" value="{{topic.id}}" id="topicID" name="topicID">
                                    <input type="hidden" value="topics" id="settingType" name="settingType">
                                  </div>
                                </div>
                                </form>
                                <br>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    <div class="modal fade" id="newTopicModal" tabindex="-1" role="dialog" aria-labelledby="newTopicModalTitle" aria-hidden="true">
                      <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                        <div class="modal-content">
                          <form action="/settings/admin" enctype=multipart/form-data method="post">
                          <div class="modal-header">
                            <h5 class="modal-title" id="newTopicModalTitle">Create New Topic</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">&times;</span>
                            </button>
                          </div>
                          <div class="modal-body">
                              <div class="container">
                                <div class="row">
                                    <div class="col-12">
                                        <input type="text" name="name" id="name" class="form-control" required autocomplete="new-password">
                                    </div>
                                </div>
                                <br>
                                <div class="row">
                                      <div class="col-12">
                                        <img width="284" height="155" src="/static/img/video-placeholder.jpg">
                                      </div>
                                </div>
                                <br>
                                <div class="row">
                                      <div class="col-12">
                                          <div class="custom-file">
                                            <input type="file" class="custom-file-input" name=photo id="photo">
                                            <label class="custom-file-label" for="photo">Upload a Photo</label>
                                          </div>
                                      </div>
                                </div>
                              </div>
                              <input type="hidden" value="topics" id="settingType" name="settingType">
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
                            <input type="submit" class="btn btn-success" value="Create">
                          </div>
                          </form>
                        </div>
                      </div>
                    </div>
                </div>
                <div class="tab-pane fade {% if page == 'channels' %}show active{% endif %}" role="tabpanel" aria-labelledby="admin-content-channels" id="channelsList">
                    <h5>Channels List</h5>
                    <div class="container-fluid justify-content-center" style="width:100%;padding-top:15px;">
                        <div class="input-group">
                            <div class="input-group-prepend shadow">
                                <div class="input-group-text"><i class="fas fa-search"></i></div>
                            </div>
                            <input type="text" id="search" name="search" class="searchBar form-control shadow" placeholder="Search">
                        </div>
                    </div>
                    <br>
                    <div class="container-fluid">
                        {% for channel in channelList %}
                        <div class="row">
                            <div class="col-12">
                                <div class="card shadow searchable">
                                  <div class="card-header">
                                      <b><span class="video-title"><a href="/channel/{{channel.id}}/">{{channel.channelName}}</a></span></b>
                                    <div class="float-right"><a href="/settings/admin?action=delete&setting=channel&channelID={{channel.id}}" class="btn btn-sm btn-danger"><i class="far fa-trash-alt"></i></a></button></div>
                                  </div>
                                  <div class="card-body">
                                    <div class="row">
                                      <div class="col-xl-2"><img class="channel-img" src="/images/{{channel.imageLocation}}" onerror="this.src='/static/img/video-placeholder.jpg';"></div>
                                      <div class="col-xl-3">
                                        <i class="fas fa-hashtag"></i> {{channel.topic|get_topicName}} <br>
                                        <i class="fas fa-user"></i> {{channel.owningUser|get_userName}} <br>
                                        <i class="fas fa-terminal"></i> {{channel.channelLoc}} <br>
                                        <i class="fas fa-eye"></i> {{channel.views}} <br>
                                        <i class="fas fa-hdd"></i> {{channel.channelLoc|get_diskUsage}} <br>
                                      </div>
                                      <div class="col-xl-4">
                                        <i class="fas fa-paragraph"></i> {{channel.description}}<br>
                                      </div>
                                      <div class="col-xl-2">
                                        <i class="fas fa-comment"></i> <span class="badge {% if channel.chatEnabled == True %} badge-success {% elif channel.chatEnabled == False %} badge-danger {% endif %}"> {{channel.chatEnabled}} </span> <br>
                                        <i class="fas fa-save"></i> <span class="badge {% if channel.record == True %} badge-success {% elif channel.record == False %} badge-danger {% endif %}"> {{channel.record}}</span> <br>
                                        <i class="fas fa-comments"></i> <span class="badge {% if channel.allowComments == True %} badge-success {% elif channel.allowComments == False %} badge-danger {% endif %}"> {{channel.allowComments}}</span> <br>
                                        <i class="fas fa-lock"></i> <span class="badge {% if channel.protected == True %} badge-success {% elif channel.protected == False %} badge-danger {% endif %}"> {{channel.protected}}</span><br>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                            </div>
                        </div>
                        <br>
                        {% endfor %}
                    </div>
                </div>
                <div class="tab-pane fade {% if page == 'streams' %}show active{% endif %}" role="tabpanel" aria-labelledby="admin-content-streams" id="streamsList">
                    <h5>Stream List</h5>
                    <div class="container-fluid justify-content-center" style="width:100%;padding-top:15px;">
                        <div class="input-group">
                            <div class="input-group-prepend shadow">
                                <div class="input-group-text"><i class="fas fa-search"></i></div>
                            </div>
                            <input type="text" id="search" name="search" class="searchBar form-control shadow" placeholder="Search">
                        </div>
                    </div>
                    <br>
                    <div class="container-fluid">
                        {% for stream in streamList %}
                        <div class="row">
                            <div class="col-12">
                                <div class="card shadow searchable">
                                  <div class="card-header"><span class="video-title"><a href="/view/{{stream.channel.channelLoc}}/"><b>{{stream.streamName}}</b></a></span></div>
                                  <div class="card-body">
                                    <div class="row">
                                      <div class="col-xl-3 col-sm-12">
                                        <img width="100%" src="/stream-thumb/{{stream.channel.channelLoc}}.png" onerror="this.src='/static/img/video-placeholder.jpg';"><br>
                                      </div>
                                      <div class="col-xl-3 col-sm-12">
                                        <i class="fas fa-video"></i> {{stream.channel.channelName}} <br>
                                        <i class="fas fa-user"></i> {{stream.channel.owningUser|get_userName}} <br>
                                        <i class="fas fa-hashtag"></i> {{stream.channel.topic|get_topicName}} <br>
                                        <i class="fas fa-eye"></i> {{stream.currentViewers}} <br>
                                        <i class="fas fa-users"></i>{{stream.totalViewers}} <br>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {# <div class="tab-pane fade {% if page == 'hub' %}show active{% endif %}" role="tabpanel" aria-labelledby="admin-content-hub" id="hubSettings">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-lg-10 col-md-12">
                                <div class="card">
                                    <div class="card-header"><h4>OSP Hub Servers</h4></div>
                                    <div class="card-body">
                                        <h5>Add an OSP Hub</h5>
                                        <hr>
                                        <form action="/settings/admin/hub" method="post">
                                            <div class="input-group">
                                                <input type="hidden" name="action" id="hubaction" value="addHub">
                                                <input type="text" name="hubServerAddress" class="form-control disabled" disabled autocomplete="new-password">
                                                <div class="input-group-append">
                                                    <button type="submit" class="btn btn-success"><i class="fas fa-plus"></i></button>
                                                </div>
                                            </div>
                                        </form>
                                        <br>
                                        {% for hubServer in hubServers %}
                                        <div class="input-group">
                                            <input type="text" class="form-control" value="{{hubServer.serverAddress}}" readonly>
                                            <div class="input-group-append">
                                                <a href="/settings/admin/hub?action=deleteServer&serverID={{hubServer.id}}" class="btn btn-danger"><i class="fas fa-trash"></i></a>
                                            </div>
                                        </div>
                                        <br>
                                        {% endfor %}
                                    </div>
                                </div>
                                <br>
                                <div class="card">
                                    <div class="card-header"><h4>Hub Connections</h4></div>
                                    <div class="card-body">
                                        <h5>Add a New Connection</h5>
                                        <hr>
                                        <form action="/settings/admin/hub" method="post">
                                            <input type="hidden" name="action" id="hubConnectionaction" value="addConnection">
                                            <div class="input-group">
                                                <select class="form-control" name="hubServer" required>
                                                    {% for hubServer in hubServers %}
                                                        <option value={{hubServer.id}}>{{hubServer.serverAddress}}</option>
                                                    {% endfor %}
                                                </select>
                                                <div class="input-group-append">
                                                    <button type="submit" class="btn btn-success"><i class="fas fa-plus"></i></button>
                                                </div>
                                            </div>
                                        </form>
                                        <br>
                                        <h5>Existing Connections</h5>
                                        <hr>
                                        {% for hub in hubConnections %}
                                        <div class="row">
                                            <div class="col-12 col-md-5">
                                                <input type="text" class="form-control readonly" readonly value="{{hub.hubServer|get_hubName}}">
                                            </div>
                                            <div class="col-12 col-md-1">
                                                <div class="badge {% if hub.status == 0 %}badge-warning {% elif hub.status == 1 %}badge-success {% endif%}">{{hub.status|get_hubStatus}}</div>
                                            </div>
                                            <div class="col-12 col-md-2">
                                                {{hub.lastUpload|normalize_date}}
                                            </div>
                                            <div class="col-12 col-md-3">
                                                <input type="text" class="form-control readonly" readonly value="{{hub.verificationToken}}">
                                                <input type="text" class="form-control readonly" readonly value="{{hub.serverToken}}">
                                            </div>
                                            <div class="col-12 col-md-1">
                                                <a href="/settings/admin/hub?action=deleteConnection&connectionID={{hub.id}}" class="btn btn-danger"><i class="fas fa-trash"></i></a>
                                            </div>
                                        </div>
                                        <br>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </div> #}
                <div class="tab-pane fade {% if page == 'logs' %}show active{% endif %}" role="tabpanel" aria-labelledby="admin-content-logs" id="logs">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-lg-10 col-md-12">
                                <h5>Logs</h5>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <table class="table table-hover" id="logTable">
                                    <thead class="thead-light">
                                    <tr>
                                        <th>
                                            <b>Timestamp</b>
                                        </th>
                                        <th>
                                            <b>Type</b>
                                        </th>
                                        <th>
                                            <b>Message</b>
                                        </th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for log in logsList %}
                                        <tr>
                                            <td>
                                                {{log.timestamp|normalize_date}}
                                            </td>
                                            <td>
                                                {{log.type|get_logType}}
                                            </td>
                                            <td>
                                                {{log.message}}
                                            </td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade {% if page == 'backup' %}show active{% endif %}" role="tabpanel" aria-labelledby="admin-content-backuprestore" id="backuprestore">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-lg-6 col-md-12">
                                <h4>Backup the OSP Database</h4>
                                <a href="/settings/admin?action=backup" class="btn btn-primary">Download</a>
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-lg-6 col-md-12">
                                <h4>Restore the OSP Database</h4>
                                <p>** Restoring a backup will wipe all existing data! **</p>
                                <form action="/settings/dbRestore" enctype=multipart/form-data method="post">
                                    <div class="custom-file">
                                        <input type="file" class="custom-file-input" name=restoreData id="restoreData" required>
                                        <label class="custom-file-label" for="restoreData">Upload Backup File</label>
                                        <script>
                                            $('#restoreData').on('change',function(){
                                                //get the file name
                                                var fileName = $(this).val();
                                                //replace the "Choose a file" label
                                                $(this).next('.custom-file-label').html(fileName);
                                            })
                                        </script>
                                    </div>
                                    <br><br>
                                    <h5>Restore Options</h5>
                                    <div class="form-check">
                                      <input class="form-check-input" type="checkbox" value="" name="restoreVideos" id="restoreVideos">
                                      <label class="form-check-label" for="restoreVideos">
                                        Restore Recorded Video DB Table
                                      </label>
                                    </div>
                                    <br>
                                    <input type="hidden" value="dbRestore" id="settingType" name="settingType">
                                    <input type="submit" class="btn btn-warning" value="Restore">
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
    function toggleDiv(selDiv){
        var divid = '#' + selDiv;
        $('.settingsOption').hide();
        $(divid).show();
    }
</script>

<script type="text/javascript" charset="utf-8">
    var conn_options = {
        'sync disconnect on unload':true
    };

    var socket = io();
</script>

<script>
    socket.on('connect', function() {
        socket.emit('getServerResources',{data:"0"});
        console.log('Sent Resource Request')
    });
</script>

<script>
    setInterval(function() {
      socket.emit('getServerResources',{data:"0"});
      console.log('Sent Resource Request')
    },10000 );
</script>

<script>
    socket.on('serverResources', function(msg) {
        console.log('Recieved:' + msg)

        $('#cpuUsage').attr('aria-valuenow', msg['cpuUsage']).css('width',msg['cpuUsage'] + '%');
        $('#cpuUsage').text(msg['cpuUsage'] + '%');

        $('#memoryUsage').attr('aria-valuenow', msg['memoryUsage']).css('width',msg['memoryUsage'] + '%');
        $('#memoryUsage').text(msg['memoryUsage'] + '%');

        $('#diskUsage').attr('aria-valuenow', msg['diskUsage']).css('width',msg['diskUsage'] + '%');
        $('#diskUsage').text(msg['diskUsage'] + '%');

    });
</script>
<script>
    var ctx = document.getElementById('viewershipChart').getContext('2d');
    ctx.canvas.width = 1024
    ctx.canvas.height = 380;
    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'bar',

        // The data for our dataset
        data: {

            datasets: [{
                label: "Live Viewers",
                fill: true,
                borderColor: 'rgb(40, 90, 150)',
                backgroundColor: 'rgb(40, 90, 150)',
                spanGaps: true,
                lineTension: 0,
                data:[
                    {% for entry in statsViewsDay['live'] %}
                        {x:'{{entry['t']}}',y:{{entry['y']}}},
                    {% endfor %}
                ]},
                {
                label: "Video Viewers",
                fill: true,
                borderColor: 'rgb(90, 150, 40)',
                backgroundColor: 'rgb(90, 150, 40)',
                spanGaps: true,
                lineTension: 0,
                data:[
                    {% for entry in statsViewsDay['recorded'] %}
                        {x:'{{entry['t']}}', y:{{entry['y']}}},
                    {% endfor %}
                ]
            }]
        },

        // Configuration options go here
        options: {
            scales: {
                xAxes: [{
                    type: 'time',
                    time: {
                        parser: 'YYYY-MM-DD',
                        unit: 'day'
                    }
                }],
            }
        }
    });
</script>

<script>
    function deleteWebhook(webhookID) {
        socket.emit('deleteGlobalWebhook', {webhookID: webhookID});
        var webhookTableRow = document.getElementById('webhookTableRow-' + webhookID);
        webhookTableRow.parentNode.removeChild(webhookTableRow);
    }
</script>

<script>
    function openNewWebhookModal() {
        $('#newWebhookModal').modal('show');
        var webhookName = document.getElementById('webhookName');
        var webhookEndpoint = document.getElementById('webhookEndpoint');
        var webhookHeader = document.getElementById('webhookHeader');
        var webhookPayload = document.getElementById('webhookPayload');
        var webhookReqTypeElement = (document.getElementById('webhookReqType'));
        var webhookTriggerElement = document.getElementById('webhookTrigger');
        var webhookInputAction = document.getElementById('webhookInputAction');
        var webhookInputID = document.getElementById('webhookID');

        webhookInputID.value = 'New';
        webhookName.value = "";
        webhookEndpoint.value = "";
        webhookHeader.value = "";
        webhookPayload.value = "";
        webhookReqTypeElement.value = 0;
        webhookTriggerElement.value = 0;
        webhookInputAction.value = 'new';
    }
</script>

<script>
	function submitWebhook() {
        var webhookName = document.getElementById('webhookName').value;
        var webhookEndpoint = document.getElementById('webhookEndpoint').value;
        var webhookHeader = document.getElementById('webhookHeader').value;
        var webhookPayload = document.getElementById('webhookPayload').value;
        var webhookReqTypeElement = (document.getElementById('webhookReqType'));
        var webhookTriggerElement = document.getElementById('webhookTrigger');
        var webhookReqType = webhookReqTypeElement.options[webhookReqTypeElement.selectedIndex].value;
        var webhookTrigger = webhookTriggerElement.options[webhookTriggerElement.selectedIndex].value;
        var webhookInputAction = document.getElementById('webhookInputAction').value;
        var webhookInputID = document.getElementById('webhookID').value;

        if (webhookName == '') {
            (document.getElementById('webhookName')).setCustomValidity('Name is Required');
        }
        if (webhookEndpoint == '') {
            (document.getElementById('webhookEndpoint')).setCustomValidity('Endpoint URL is Required');
        }
        socket.emit('submitGlobalWebhook', {webhookName: webhookName, webhookEndpoint: webhookEndpoint, webhookHeader:webhookHeader, webhookPayload:webhookPayload, webhookReqType: webhookReqType, webhookTrigger: webhookTrigger, inputAction:webhookInputAction, webhookInputID:webhookInputID});
	}
</script>

<script>
    function editWebhook(webhookID) {
        var webhookTrigger = document.getElementById('webhookTrigger');
        var webhookName = document.getElementById('webhookName');
        var webhookEndpoint = document.getElementById('webhookEndpoint');
        var webhookHeader = document.getElementById('webhookHeader');
        var webhookPayload = document.getElementById('webhookPayload');
        var webhookReqTypeElement = document.getElementById('webhookReqType');
        var webhookInputAction = document.getElementById('webhookInputAction');
        var webhookInputID = document.getElementById('webhookID');

        var triggerVal = document.getElementById('webhookRowTrigger-' + webhookID).innerText;

        switch(triggerVal) {
          case 'Stream Start':
            triggerVal = 0;
            break;
          case 'Stream End':
            triggerVal = 1;
            break;
          case 'Stream Viewer Join':
            triggerVal = 2;
            break;
          case 'Stream Viewer Upvote':
            triggerVal = 3;
            break;
          case 'Stream Name Change':
            triggerVal = 4;
            break;
          case 'Chat Message':
            triggerVal = 5;
            break;
          case 'New Video':
            triggerVal = 6;
            break;
          case 'Video Comment':
            triggerVal = 7;
            break;
          case 'Video Upvote':
            triggerVal = 8;
            break;
          case 'Video Name Change':
            triggerVal = 9;
            break;
          case 'Channel Subscription':
            triggerVal = 10;
            break;
          case 'New User':
            triggerVal = 20;
            break;
          default:
            triggerVal = 0;
        }

        webhookName.value = document.getElementById('webhookRowName-' + webhookID).innerText;
        webhookEndpoint.value = document.getElementById('webhookRowEndpoint-' + webhookID).innerText;
        webhookHeader.value = document.getElementById('webhookRowHeader-' + webhookID).innerText;
        webhookPayload.value = document.getElementById('webhookRowPayload-' + webhookID).innerText;
        webhookReqTypeElement.value = document.getElementById('webhookRowType-' + webhookID).innerText;
        webhookTrigger.value = triggerVal;
        webhookInputAction.value = 'edit';
        webhookInputID.value = webhookID;

        $('#newWebhookModal').modal('show');
        webhookHeader.value = JSON.stringify(JSON.parse(webhookHeader.value), undefined, 2);
        webhookPayload.value = JSON.stringify(JSON.parse(webhookPayload.value), undefined, 2);
    }
</script>

<script type="text/javascript" charset="utf-8">
    socket.on('newGlobalWebhookAck', function (msg) {
        var webhookName = msg['webhookName'];
        var webhookURL = msg['requestURL'];
        var webhookHeader = msg['requestHeader'];
        var webhookPayload = msg['requestPayload'];
        var webhookRequestType = msg['requestType'];
        var webhookTrigger = msg['requestTrigger'];
        var webhookID = msg['requestID'];

        var tableRef = document.getElementById('webhookTable').getElementsByTagName('tbody')[0];

        var newRow = tableRef.insertRow(tableRef.rows.length);
        newRow.id = 'webhookTableRow-' + webhookID;

        var webhookNameCell = newRow.insertCell(0);
        var endpointURLCell = newRow.insertCell(1);
        var requestTriggerCell = newRow.insertCell(2);
        var requestTypeCell = newRow.insertCell(3);
        var requestHeaderCell = newRow.insertCell(4);
        var requestPayloadCell = newRow.insertCell(5);
        var buttonCell = newRow.insertCell(6);

        webhookNameCell.id = "webhookRowName-" + webhookID;
        endpointURLCell.id = "webhookRowEndpoint-" + webhookID;
        requestTriggerCell.id = "webhookRowTrigger-" + webhookID;
        requestTypeCell.id = "webhookRowType-" + webhookID;
        requestHeaderCell.id = "webhookRowHeader-" + webhookID;
        requestPayloadCell.id = "webhookRowPayload-" + webhookID;

        endpointURLCell.style.display = 'none';
        requestTypeCell.style.display = 'none';
        requestHeaderCell.style.display = 'none';
        requestPayloadCell.style.display = 'none';

        var buttonText = '<button type="button" class="btn btn-sm btn-warning" onclick="editWebhook(\'' + webhookID + '\')"><i class="fas fa-edit"></i></button> <button type="button" class="btn btn-sm btn-danger" onclick="deleteWebhook(\'' + webhookID + '\')"><i class="far fa-trash-alt"></i></button>';

        var triggerVal = 'Unknown';

        switch(webhookTrigger) {
          case 0:
            triggerVal = 'Stream Start';
            break;
          case 1:
            triggerVal = 'Stream End';
            break;
          case 2:
            triggerVal = 'Stream Viewer Join';
            break;
          case 3:
            triggerVal = 'Stream Viewer Upvote';
            break;
          case 4:
            triggerVal = 'Stream Name Change';
            break;
          case 5:
            triggerVal = 'Chat Message';
            break;
          case 6:
            triggerVal = 'New Video';
            break;
          case 7:
            triggerVal = 'Video Comment';
            break;
          case 8:
            triggerVal = 'Video Upvote';
            break;
          case 9:
            triggerVal = 'Video Name Change';
            break;
          case 'Channel Subscription':
            triggerVal = 10;
            break;
          case 20:
            triggerVal = 'New User';
            break;
          default:
            triggerVal = 'Unknown';
        }

        webhookNameCell.appendChild(document.createTextNode(webhookName));
        endpointURLCell.appendChild(document.createTextNode(webhookURL));
        requestTriggerCell.appendChild(document.createTextNode(triggerVal));
        requestTypeCell.appendChild(document.createTextNode(webhookRequestType));
        requestHeaderCell.appendChild(document.createTextNode(webhookHeader));
        requestPayloadCell.appendChild(document.createTextNode(webhookPayload));
        buttonCell.innerHTML = buttonText;

    });
    </script>

<script type="text/javascript" charset="utf-8">
    socket.on('changeGlobalWebhookAck', function (msg) {
        var webhookName = msg['webhookName'];
        var webhookURL = msg['requestURL'];
        var webhookHeader = msg['requestHeader'];
        var webhookPayload = msg['requestPayload'];
        var webhookRequestType = msg['requestType'];
        var webhookTrigger = msg['requestTrigger'];
        var webhookID = msg['requestID'];

        webhookNameCell = document.getElementById('webhookRowName-' + webhookID);
        endpointURLCell = document.getElementById('webhookRowEndpoint-' + webhookID);
        requestTriggerCell = document.getElementById('webhookRowTrigger-' + webhookID);
        requestTypeCell = document.getElementById('webhookRowType-' + webhookID);
        requestHeaderCell = document.getElementById('webhookRowHeader-' + webhookID);
        requestPayloadCell = document.getElementById('webhookRowPayload-' + webhookID);

        var triggerVal = 'Unknown';

        switch(webhookTrigger) {
          case 0:
            triggerVal = 'Stream Start';
            break;
          case 1:
            triggerVal = 'Stream End';
            break;
          case 2:
            triggerVal = 'Stream Viewer Join';
            break;
          case 3:
            triggerVal = 'Stream Viewer Upvote';
            break;
          case 4:
            triggerVal = 'Stream Name Change';
            break;
          case 5:
            triggerVal = 'Chat Message';
            break;
          case 6:
            triggerVal = 'New Video';
            break;
          case 7:
            triggerVal = 'Video Comment';
            break;
          case 8:
            triggerVal = 'Video Upvote';
            break;
          case 9:
            triggerVal = 'Video Name Change';
            break;
          case 'Channel Subscription':
            triggerVal = 10;
            break;
          case 20:
            triggerVal = 'New User';
            break;
          default:
            triggerVal = 'Unknown';
        }

        webhookNameCell.innerText = webhookName;
        endpointURLCell.innerText = webhookURL;
        requestTriggerCell.innerText = triggerVal;
        requestTypeCell.innerText = webhookRequestType;
        requestHeaderCell.innerText = webhookHeader;
        requestPayloadCell.innerText = webhookPayload;
    });
</script>

<script>
    var simplemde1 = new EasyMDE({ element: document.getElementById("serverMessage") });
</script>


<script>
$('#search').on('input', function(){
    var query = document.getElementById("search").value.toLowerCase();
    $('.searchable').each(function(){
         var $this = $(this);
         if($this.text().toLowerCase().indexOf(query) === -1)
             $this.closest('.searchable').hide();
        else $this.closest('.searchable').show();
    });
});
</script>

{% endblock %}

